<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>event</title>
  <script src="/js/vue.min.js"></script>
  <style>
    .div {
      height: 400px;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div id="event">
    <tpl :evt="events" @click_div.self="div(events.div, $event)" @click_btn="btn(events.btn)"></tpl>
    <!-- <tpl :evt="events"></tpl> -->
  </div>
</body>

<script>
  Vue.component('tpl', {
    template: `
    <div class="div" @click="$emit('click_div', $event)">
      {{ evt.div }}
      <button @click="$emit('click_btn')">{{ evt.btn }}</button>
    </div>`,
    // template:`<p>{{ evt.div }}</p>`,
    props: ['evt']
  })

  let app = new Vue({
    el: '#event',
    data: {
      events: {
        div: 'div',
        btn: 'btn'
      },
      msg: "message"
    },
    methods: {
      div(msg, event) {
        alert('click ' + msg)
        console.log(event);
      },
      btn(msg) {
        alert('click ' + msg)
      }
    }
  })
</script>

</html>
